import React, { PureComponent } from 'react';
import { connect } from 'dva';
import * as Utils from '@/utils/utils';
import router from 'umi/router';
import Link from 'umi/link';

import {
  List,
  Avatar,
  Card,
  Button,
  Form,
  Input,
  Modal,
  Select,
  InputNumber,
  Popconfirm,
  Radio,
  Table,
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './styles.less';

const { Item: FormItem } = Form;
const { Button: RadioButton, Group: RadioGroup } = Radio;
const { Option } = Select;
const { TextArea, Search } = Input;


const ModelName = 'system';

@connect(({ loading, system }) => ({
  loading: loading.effects[`${ModelName}`],
  model: system,
}))
@Form.create()
class Comp extends PureComponent {


  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: `${ModelName}/getBackupList`,
    });
  }


  handleBackup = () => {
    const { dispatch } = this.props;
    dispatch({
      type: `${ModelName}/backupDatabase`,
    });
  };

  handleDownload = (record) => {
    window.open(`/api/System/downloadBackupFile?fileName=${record.fileName}`, 'blank');
  }

  render() {
    const {
      model,
      loading,
    } = this.props;
    const { backupList } = model;

    const columns = [
      {
        title: '#',
        dataIndex: 'ReNo',
        render: (text, record, index) => (
          <span> {index + 1} </span>
        ),
      },
      {
        title: '最后访问时间',
        dataIndex: 'createTime',
        render: (text, record) => Utils.getChineseDateTime(record.createTime),
      },
      {
        title: '最后修改时间',
        dataIndex: 'modifyTime',
        render: (text, record, index) => Utils.getChineseDateTime(record.modifyTime),
      },
      {
        title: '文件名',
        dataIndex: 'fileName',
      },
      {
        title: '',
        dataIndex: 'action',
        render: (text, record, index) => (<span><a onClick={(e) => this.handleDownload(record)}>下载</a></span>),
      },
    ];

    const extraContent = (
      <div className={styles.extraContent}>
        <Button type="primary" onClick={() => this.handleBackup()} >立刻备份</Button>
      </div>
    );

    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card
            className={styles.listCard}
            bordered={false}
            title={model.title}
            extra={extraContent}
          >
            <Table
              bordered={true}
              key="id"
              rowKey="id"
              size="small"
              loading={loading}
              dataSource={backupList}
              columns={columns}
              pagination={false}
            />
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default Comp;
